<!-- 我的 - 订单列表 -->
<template>
  <view class="bg-#f6f6f6 min-h-screen">
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <z-navbar title="我的订单" :border-bottom="true"></z-navbar>
        <u-tabs bg-color="#fff" :is-scorll="false" :list="tabList" bar-height="6" bar-width="44" active-color="#333"
          inactive-color="#999" font-size="32" :bar-style="barStyle" v-model="state.currentIndex"
          @change="refresh"></u-tabs>
      </template>
      <view class="px-4 pt-5">
        <template v-if="state.currentIndex == 0">
          <order-online-item v-for="(item, index) in state.list" :key="index" :data="item" @cancel="onlineCancel"
            @pay="onlinePay" />
        </template>
        <template v-if="state.currentIndex == 1">
          <order-offline-item v-for="(item, index) in state.list" :key="index" :data="item" @cancel="offlineCancel" />
        </template>
        <template v-if="state.currentIndex == 2">
          <order-vip-item v-for="(item, index) in state.list" :key="index" :data="item" />
        </template>
      </view>
    </z-paging-list>
  </view>
</template>

<script setup>
import { showToast, showModal } from '@/common/util/uni';
import { wxPay } from '@/common/util/wx'
import orderOnlineItem from '@/package_user/components/order-online-item.vue'
import orderOfflineItem from '@/package_user/components/order-offline-item.vue'
import orderVipItem from '@/package_user/components/order-vip-item.vue'

import { getOrderOnline, postOrderOnlineCancel, postOrderOnlineTopay, getOrderOffline, getVipOrderList, postOrderOfflineCancel } from '@/common/http/module/order'

const list = ref();
const state = reactive({
  currentIndex: 0,
  currentId: 0,
  list: []
});

const tabList = [
  { id: 0, name: '线上课程' },
  { id: 1, name: '线下课程' },
  { id: 2, name: '会员订单' },

]
const barStyle = {
  backgroundColor: '#F4AF22'
}

// 线上订单取消
function onlineCancel (order_id) {
  showModal({
    content: '是否确认取消订单？',
    confirmText: '确定',
    cancelText: '取消',
    success: ({ confirm }) => {
      if (confirm) {
        postOrderOnlineCancel({ order_id }).then(() => {
          showToast('取消成功')
          refresh()
        })
      }
    }
  })
}

// 线上订单支付
function onlinePay (order_id) {
  postOrderOnlineTopay({ order_id }).then(res => {
    wxPay(res.data)
      .then(() => {
        showToast('支付成功', '')
        refresh()
      }).catch(() => {
        showToast('支付失败', 'error')
      })
  })
}

// 线下订单取消
function offlineCancel (order_id) {
  showModal({
    content: '是否确认取消预约？',
    confirmText: '确定',
    cancelText: '取消',
    success: ({ confirm }) => {
      if (confirm) {
        postOrderOfflineCancel({ order_id }).then(() => {
          showToast('取消成功')
          refresh()
        })
      }
    }
  })
}

function refresh () {
  list.value.onRefresh()
}

function loadData (page) {
  const tabPostList = [
    { currentIndex: 0, postMethod: getOrderOnline },
    { currentIndex: 1, postMethod: getOrderOffline },
    { currentIndex: 2, postMethod: getVipOrderList },
  ]
  tabPostList[state.currentIndex].postMethod(page).then(res => {
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad(() => {
  loadData;
});

defineExpose({ refresh })
</script>

<style lang="scss" scoped>
:deep(.u-tabs) {
  width: 100% !important;
}

:deep(.u-scroll-box) {
  display: flex;
}

:deep(.u-tab-item) {
  flex: 1;
}
</style>

